<div class="module-content module-vertical" style="padding: 10px; grid-gap: 10px;">
    <div class="module-header">
        <div class="module-header-title">
            <nz-breadcrumb>
                <nz-breadcrumb-item>
                    销售历史
                </nz-breadcrumb-item>
            </nz-breadcrumb>
        </div>
    </div>
    <div class="module-body">
        <div class="list" style="height: 100%; display: grid; grid-template-rows: auto 1fr auto; grid-gap: 10px;">
            <div class="list-header">
                <div class="search-container">
                    <nz-form-item style="margin-bottom: 10px;">
                        <nz-form-label [nzSpan]="2">产品大类</nz-form-label>
                        <nz-form-control [nzSpan]="22">
                            <nz-radio-group [(ngModel)]="option.catalog" nzButtonStyle="solid" (ngModelChange)="activeType1()">
                                <label nz-radio-button nzValue="all">全部</label>
                                <label nz-radio-button *ngFor="let t of option.catalogs" [nzValue]="t.code" >{{t.name}}</label>
                            </nz-radio-group>
                        </nz-form-control>
                    </nz-form-item>

                    <nz-form-item style="margin-bottom: 10px;" *ngIf="option.catalog !== 'all'">
                        <nz-form-label [nzSpan]="2">产品小类</nz-form-label>
                        <nz-form-control [nzSpan]="22">
                            <nz-radio-group [(ngModel)]="option.category" nzButtonStyle="solid" (ngModelChange)="activeType2()">
                                <label nz-radio-button nzValue="all">全部</label>
                                <label nz-radio-button *ngFor="let t of option.categories" [nzValue]="t.code" >{{t.name}}</label>
                            </nz-radio-group>
                        </nz-form-control>
                    </nz-form-item>

                </div>
                <div class="operate">
                 
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8">选择产品</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <nz-select style="width: 100%;" [(ngModel)]="option.product" nzPlaceHolder="选择" nzShowSearch [compareWith]="compareObject" (ngModelChange)="filter()">
                                <ng-container *ngFor="let c of option.products">
                                    <nz-option [nzValue]="c" [nzLabel]="c.name"></nz-option>
                                </ng-container>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8">选择客户</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <nz-select style="width: 100%;" [(ngModel)]="option.customer" nzPlaceHolder="选择" nzShowSearch [compareWith]="compareObject" (ngModelChange)="filter()">
                                <ng-container *ngFor="let c of option.customers">
                                    <nz-option [nzValue]="c" [nzLabel]="c.name"></nz-option>
                                </ng-container>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8">起止日期</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <nz-range-picker [(ngModel)]="option.range" (ngModelChange)="changeDate($event)" [nzAllowClear]="false"></nz-range-picker>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label [nzSpan]="8">支付状态</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <nz-select style="width: 100%;" [(ngModel)]="option.paid" (ngModelChange)="filter()">
                                <nz-option [nzValue]="'all'" [nzLabel]="'全部'"></nz-option>
                                <nz-option [nzValue]="true" [nzLabel]="'已支付'"></nz-option>
                                <nz-option [nzValue]="false" [nzLabel]="'未支付'"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    
                    <div></div>
                
                    <nz-input-group [nzSuffix]="suffixIconSearch">
                        <input type="text" nz-input placeholder="搜索订单编号" name="keyword" [(ngModel)]="option.keyword" (ngModelChange)="filter()"/>
                    </nz-input-group>
                    <ng-template #suffixIconSearch>
                        <i nz-icon nzType="search"></i>
                    </ng-template>
                </div>
            </div>
            <div class="list-body" style="overflow: auto;">
                <nz-empty *ngIf="!_sells || _sells.length == 0"></nz-empty>
                <div class="list-grid-item" *ngFor="let item of page">
                    <label nz-checkbox [(ngModel)]="item.checked"></label>
                    <img class="list-grid-item-image" [src]="item.product.pictures && item.product.pictures.length > 0 ? configService.api.download_api + '/' + item.product.pictures[0].auto_name : 'assets/img/default/dummy.png'"/>
                    <div class="list-grid-item-text">
                        <span class="list-grid-item-name">{{item.product.name}}</span>
                        <span class="list-grid-item-code text-primary">编码 {{item.product.code}}</span>
                        <span class="list-grid-item-code">订单编号 {{item.code}}</span>
                    </div>
                    <span> {{item.customer.name}} </span>
                    <span> {{item.customer.phone}} </span>
                    <span> {{item.date | date: 'yyyy-MM-dd HH:mm:ss'}} </span>
                    <span class="list-grid-item-price text-danger"> 单价:{{item.price}} </span>
                    <span class="list-grid-item-count"> 数量:{{item.amount}} </span>
                    <span class="list-grid-item-sum text-danger"> 小计:{{item.price * item.amount}} </span>
                    <!-- <label class="label label-lg" [ngClass]="{'label-success': item.paid, 'label-danger': !item.paid}">{{item.paid ? "已支付" : "未支付"}}</label> -->
                    <nz-tag nzColor="error" *ngIf="!item.paid">未支付</nz-tag>
                    <nz-tag nzColor="success" *ngIf="item.paid">已支付</nz-tag>
                </div>
            </div>
            <div class="list-footer" style="display: grid; align-items: center; padding: 10px 20px; grid-template-columns: auto auto auto auto 1fr auto; grid-gap: 10px; ">
                <button nz-button nzType="default" (click)="clearSelection()">清空</button>
                <button nz-button nzType="default" (click)="printSelection()">打印</button>
                <button nz-button nzType="primary" (click)="paySelection()">完成支付</button>
                <button nz-button nzType="primary" nzDanger (click)="unpaySelection()">取消支付</button>
                <nz-pagination style="justify-self: end;" [(nzPageIndex)]="option.current" [nzTotal]="sells.length" (nzPageIndexChange)="filter()"></nz-pagination>
                <span class="text-danger" style="font-size: 28px;"> 总计: {{total()}} </span>
            </div>
        </div>
    </div>
</div>

